<template>
<div class="pageBuild">
    <vue-particles
        :class="{ show: particlesHasInit }"
        id="pageBuildParticles"
        :options="Options"
        @particlesLoaded="particlesLoaded"
    />
    <!-- <div class="back flex items-center justify-center" @click="toIndex">BACK</div> -->
    <tetrisBuild :onlyCourt="true" ref="TetrisBuildEl" />
    <!-- 移动端 虚拟按钮 -->
    <div class="virtualButtonBox" v-if="isMobile()">
        <virtualButton 
            ref="VirtualButton"
            :isEdit="true"
        />
    </div>
</div>
</template>

<script lang="ts" setup>
import { ref, onActivated, onDeactivated, reactive } from "vue";
import virtualButton from "@/components/virtualButton.vue";
import { useRouter } from "vue-router";
import { particlesOptions } from "@/utils/particlesOptions";
let Options = particlesOptions() as any // 初始配置
import { 
    useWindowSize,
    watchDebounced,
} from '@vueuse/core'
import { 
    isMobile,
} from "@/utils/utils"
import useAppStore from '@/pinia'
const app = useAppStore()

const TetrisBuildEl = ref() // 实例
const particlesHasInit = ref(false)
let container = null as any // 容器实例

const particlesLoaded = async (el) => {
    particlesHasInit.value = true
    container = el
}

const data = reactive({
    size: 0,
    penMode: 'block',
})

const { height: WindowHeight } = useWindowSize()
const windowResize = () => {
    initTetrisSize()
}
// 防抖监听WindowHeight变化
watchDebounced (WindowHeight, windowResize, { debounce: 200 })

const initTetrisSize = () => {
    const height = Math.floor(WindowHeight.value * 0.9)
    const size = Math.floor(height / 20)
    console.log('data.size',data.size)
    data.size = size
}

const router = useRouter()
const toIndex = () => {
    app.playSound('audio3')
    router.replace({
        path: `/`,
    })
}

onActivated(() => {
    if (container) {
        container.refresh()
        particlesHasInit.value = true
    }
    initTetrisSize()
})

onDeactivated(() => {
    if (container) {
        container.pause()
        container.stop()
    }
    particlesHasInit.value = false
})


</script>

<style lang="scss" scoped>
.pageBuild {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    #pageBuildParticles {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
        pointer-events: none;
        opacity: 0;
    }
    .back {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        max-width: 30vmin;
        border-right: 1px solid rgba(111, 155, 222, 0.1);
        color: hsl(0, 0%, 80%);
        font-size: 5vmin;
        cursor: pointer;
        border-radius: 1.5vmin;
        letter-spacing: 0.5vmin;
        transition: all 0.3s;
        z-index: 2;
        &:hover {
        color: #fff;
        border-right: 1px solid rgba(111, 155, 222, 0.4);
        max-width: 40vmin;
        background-color: rgba(111, 155, 222, 0.3);
        box-shadow: 0px 0px 24px 0px rgba(111, 155, 222, 0.4);
        letter-spacing: 4vmin;
        }
    }
    .show {
        animation: show 1s ease-in-out forwards;
    }
    @keyframes show {
        0% {
        opacity: 0;
        }
        100% {
        opacity: 1
        }
    }
}
.virtualButtonBox {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 0;
}

</style>